﻿<template>
  <baseUI :isShow="myConfig.isShow" :label="myConfig.label" :showLabel="myConfig.showLabel"
  :labelSpan="myConfig.labelSpan" :isRequired="myConfig.isRequired" :showErrMsg="showErrMsg" :errMsg="errMsg"
  :commonConfig="commonConfig">
    <div class="div-img" :style="myConfig.myStyle">
      <el-image
      v-if="selectedValue"
      lazy
      :fit="myConfig.other.fit"
      class="showImg"
      :src="selectedValue">
        <div slot="error" class="image-slot">
          <i></i>
        </div>
      </el-image>
      <span class="toolset">
        <span @click="handleView">
          <i class="el-icon-zoom-in"></i>
        </span>
        <span @click="handleEdit" v-if="myConfig.isEnable">
          <i class="el-icon-edit"></i>
        </span>
      </span>
    </div>
    <el-dialog v-drag
        :closeOnClickModal="false"
        :visible.sync="showPop"
        append-to-body
        width="50%"
        class="pop"
        :before-close="handleShowPopClose">
      <el-form>
        <el-form-item>
          <el-upload
          ref="upload"
          :class="{disabled: uploadDisabled}"
          multiple
          list-type="picture-card"
          :disabled="!myConfig.isEnable"
          :action="uploadUrl"
          :auto-upload="false"
          accept="image/*"
          name="file"
          :limit="1"
          :show-file-list="true"
          :file-list="fileList"
          :on-success="handleSuccess"
          :on-preview="handlePictureCardPreview"
          :before-remove="handleRemove"
          :on-change="handleChange">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitUpload">确定</el-button>
          <el-button type="info" @click="cancelUpload">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog width="50%" append-to-body :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="[selectedValue]" />
  </baseUI>
</template>
<script>
import baseComponent from '../baseComponent.vue'
import baseUI from '../baseUI.vue'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  components: {
    baseComponent, baseUI, ElImageViewer
  },
  extends: baseComponent,
  mounted () {
    this.init(this.config)
    if (this.selectedValue) {
      this.setValue(this.selectedValue)
    }
  },
  data () {
    return {
      uploadUrl: $URL.IMG_UPLOAD_URL + '/fileset/upload_stream',
      dialogImageUrl: '',
      showPop: false,
      dialogVisible: false,
      fileList: [],
      isClickSubmit: false,
      imgViewerVisible: false,
      hasFileReady: false,
      uploadDisabled: false
    }
  },
  methods: {
    isDataComponent () {
      return true
    },
    handleRemove (file, fileList) {
      if (!file.response && file.url.startsWith('blob:')) return true
      let url = ''
      if (file.response) {
        url = file.response.result.file_down_url
      } else {
        url = file.url
      }
      return this.$api.recycle2FileService(url).then(data => {
        this.selectedValue = ''
        this.uploadDisabled = false
      })
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleSuccess (response, file, fileList) {
      let rep = response
      if (rep.error) {
        this.$message.error('上传失败:' + rep.error)
        return false
      }
      if (rep.result.code !== 'success') {
        this.$message.error('上传失败:' + rep.result.msg)
        return false
      }
      if (!this.selectedValue) {
        this.selectedValue = []
      }
      this.selectedValue = response.result.file_down_url
      if (this.isClickSubmit) {
        this.showPop = false
      }
    },
    handleChange (file, fileList) {
      if (file.status === 'ready') {
        this.hasFileReady = true
        this.uploadDisabled = true
      }
    },
    handleShowPopClose () {
      this.showPop = false
    },
    handleEdit () {
      this.fileList = []
      if (this.selectedValue) {
        this.fileList.push({
          name: '',
          url: this.selectedValue
        })
        this.uploadDisabled = true
      }
      this.hasFileReady = false
      this.isClickSubmit = false
      this.showPop = true
    },
    handleView () {
      this.imgViewerVisible = true
    },
    submitUpload () {
      if (this.hasFileReady) {
        this.$refs.upload.submit()
        this.isClickSubmit = true
      } else {
        this.showPop = false
      }
    },
    cancelUpload () {
      this.showPop = false
    },
    closeImgViewer () {
      this.imgViewerVisible = false
    }
  },
  watch: {
  },
  computed: {
  }
}
</script>
<style lang="scss">
.disabled .el-upload--picture-card {
  display: none;
}
//隐藏上传以及删除时得效果
.el-upload-list__item {
  transition: none !important;
}
.div-img {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  margin: 0 8px 8px 0;
  display: inline-block;
  position: relative;
  .showImg {
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
    overflow: hidden;
  }
  .toolset {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0,0,0,0.5);
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
  }
  .toolset:hover {
    opacity: 1;
  }
  .toolset span:not(:first-child) {
    margin-left: 15px;
  }
  .toolset span {
    top: calc(50% - 20px);
    position: relative;
    cursor: pointer;
  }
}
.image-slot {
  font-size: 20px;
  top: calc(50% - 20px);
  display: flex;
  position: relative;
  justify-content: center;
}
</style>
